<template>

	<tui-list-cell :hover="false" :arrow="theOptions.readonly?false:true">
		<view class="input_line">
			<view class="input_title">
				<text v-show="theRules&&theRules[0]&&theRules[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="input_content">
				<view class="view_input">
					<textarea @blur='blurVal' class="the_input" :style="{lineHeight: '30rpx',minHeight: theOptions.minRows*30+'rpx',maxHeight: theOptions.maxRows*30+'rpx',fontSize:theOptions.size + 'rpx'}"
					 auto-height :rows="theOptions.maxRows" v-model="theOptions.defaultValue" :placeholder="theOptions.placeholder"
					 :disabled="theOptions.disabled"></textarea>
					<tui-icon @click="clearInput" class="tui-icon-close clear_value" v-show="theOptions.clearable" :style="{fontSize:theOptions.iconSize+'rpx'}"></tui-icon>
				</view>
			</view>
		</view>
	</tui-list-cell>


</template>

<script>
	import tuiIcon from '../../thor-com/icon/icon.vue'
	export default {
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object
			},
			options: {
				type: Object
			},
			rules: {
				type: Array
			}
		},
		data() {
			return {
				theOptions: {},
				// inputValue: '',
				theRules: [],
			}
		},
		watch: {
			emData: function(val) {
				// console.log('重置textarea:')
				this.theOptions = val.options; //重置数据
			},
		},
		components: {
			tuiIcon
		},
		created() {
			if (this.emData && this.emData.options) {
				if (this.emData.rules) {
					this.theRules = this.emData.rules
				};
				this.theOptions = this.emData.options;
			} else {
				this.theOptions = this.options;
			}
			// this.inputValue = this.theOptions.defaultValue;
		},
		methods: {
			clearInput() {
				if (this.theOptions.disabled) {
					return
				};
				return this.theOptions.defaultValue = '';
			},
			blurVal() {
				if (this.theOptions.disabled) {
					return
				};
				this.$emit('onChangeVal', {
					value: this.theOptions.defaultValue
				});
			},
		}
	}
</script>

<style>
	.isrequire{
		color: #d41200;
	}
	
	.input_line {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.input_title {
		min-width: 100upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.input_content {
		width: 100%;
		min-width: 50%;
		background: #FFFFFF;
		padding: 12upx 0upx;
		box-sizing: border-box;
	}

	.view_input {
		width: 100%;
		border: 1upx solid #D9D9D9;
		box-sizing: border-box;
		position: relative;
	}

	.the_input {
		width: 100%;
		background: none;
		padding: 6upx 12upx;
		padding-right: 35upx;
		box-sizing: border-box;
	}

	.clear_value {
		position: absolute;
		right: 10upx;
		top: 50%;
		transform: translateY(-50%);
		color: #D9D9D9 !important;
		z-index: 999;
	}
</style>
